<template>
  <div>
    <el-dialog class="bottomdioa" v-model="props.dialogvis" :width="props.diawidth" :show-close="false"
      :style="(props.diaheight / 16) + 'rem'" :close-on-click-modal="false" draggable :modal="false" overflow
      modal-class="dialog_class" :id="props.dioid">
      <template #header>
        <div class="X_Plot_dialog_header">
          <!-- title -->
          <div class="X_Plot_dialog_title">{{ props.diatitle }}</div>
          <!-- 头部按钮 -->
          <div style="
              position: absolute;
              right: 0;
              top: 0;
              width: 72px;
              height: 32px;
              display: flex;
              align-items: center;
              justify-content: space-evenly;
            ">
            <img width="16px" height="16px" style="cursor: pointer" src="@/assets/img/27/xiao.png"
              @click="handleClose('缩小')" />
            <img width="16px" height="16px" style="cursor: pointer" src="@/assets/img/27/qpdialog.png" />
            <img width="16px" height="16px" style="cursor: pointer" src="@/assets/img/27/gbdialog.png"
              @click="handleClose('关闭')" />
          </div>
        </div>
      </template>
      <!-- body -->
      <slot name="dialogbody"></slot>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, defineProps, defineEmits, nextTick } from "vue";

const props = defineProps([
  "dialogvis",
  "diawidth",
  "diatitle",
  "diaheight",
  "dioid",
]);
const emits = defineEmits(["beforeClose"]);

const handleClose = (data) => {
  emits("beforeClose", data);
  // emits('update:dialogvis', false)
};
</script>

<style scoped>
:deep(.el-dialog__header) {
  margin: -16px;

  border-left: 2px solid rgba(0, 137, 255, 1);
  border-right: 2px solid rgba(0, 137, 255, 1);
  border-top: 2px solid rgba(0, 137, 255, 1);
}

:deep(.el-dialog__body) {
  color: rgba(168, 214, 255, 1);
}

:deep(.el-dialog) {
  background: rgba(0, 38, 78, 0.90);
  --el-dialog-margin-top: 10vh;
  background-image: url("@/assets/img/27/beijingdialog.png");
  background-repeat: no-repeat;
  /* 不重复图片 */
  background-size: 100% 100%;
  /* 拉伸图片填满整个对话框 */
}

.X_Plot_dialog_body {
  display: none;
}

.X_Plot_dialog_header {
  width: 100%;
  height: 32px;
  background: #002245;
  border-radius: 2px 2px 0px 0px;
  backdrop-filter: blur(1px);
  text-align: center;
  position: relative;
}

.X_Plot_dialog_title {
  text-align: center;
  width: 100%;
  height: 32px;
  font-family: PingFangSC, PingFang SC;
  font-size: 18px;
  color: #01c2ff;
  letter-spacing: 1px;
}

:deep(.el-dialog) {
  pointer-events: auto;
}
</style>